<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="https://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
  <script src="./my_jquery1.js"></script>
  <!--  <style type="text/css">-->
  <!--    /*.important{*/-->
  <!--    /*  font-weight: bold;*/-->
  <!--    /*  font-size:xx-large;*/-->
  <!--    /*}*/-->
  <!--    /*.blue{*/-->
  <!--    /*  color: blue;*/-->
  <!--    /*}*/-->
  <!--    /*.ancestors **/-->
  <!--    /*{*/-->
  <!--    /*  display: block;*/-->
  <!--    /*  border: 2px solid lightgrey;*/-->
  <!--    /*  color: lightgrey;*/-->
  <!--    /*  padding: 5px;*/-->
  <!--    /*  margin: 15px;*/-->
  <!--    /*}*/-->
  <!--    /*.descendants **/-->
  <!--    /*{*/-->
  <!--    /*  display: block;*/-->
  <!--    /*  border: 2px solid lightgrey;*/-->
  <!--    /*  color: lightgrey;*/-->
  <!--    /*  padding: 5px;*/-->
  <!--    /*  margin: 15px;*/-->
  <!--    /*}*/-->
  <!--  .siblings * {-->
  <!--    display: block;-->
  <!--    border: 2px solid lightgrey;-->
  <!--    color: lightgrey;-->
  <!--    padding: 5px;-->
  <!--    margin: 15px;-->
  <!--  }-->
  <!--</style>-->
</head>
<!--
jQuery 插入 添加元素
append() 在被选元素的结尾插入内容
prepend() 在被选元素的开头插入内容
after() 在被选元素之后插入内容
before() 在被选元素之前插入内容

通过 append() 和 prepend() 方法添加若干新元素
在被选元素的开头/结尾插入文本/HTML append() 和 prepend() 方法能够通过参数接收无限数量的新元素
删除元素
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
remove() 删除被选元素 以其子元素
empty() 删除被选元素的所有子元素
过滤被删除的元素 remove() 方法也可接受一个参数 允许对被删除元素进行过滤

通过 jQuery 获取并设置css类
addClass() 向被元素添加一个或多个类名
removeClass() 从被元素删除一个或多个类
toggleClass() 对被选元素进行添加/删除类的切换操作
css() 设置或返回样式属性

jQuery css()方法 设置或返回被选元素的一个或多个样式属性

返回尺寸
width() 返回元素宽度
height() 返回元素高度
innerWidth() 返回元素内宽度
innerHeight() 返回元素内高度
outerWidth() 返回元素外宽度
outerHeight() 返回元素外高度

width() 方法设置或返回元素的宽度 (不包括内边距,边距,或外边距)
height() 方法设置或返回元素的高度 (不包括内边距,边距,或外边距)

遍历 jQuery 遍历意味移动 用于根据其相对于其他元素的关系来 查找 HTML 元素 以某些选择开始,并沿着这个选择移动
直到抵达期望的元素为止
<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
两个 <li> 元素是同胞（拥有相同的父元素）。
右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

遍历方法中最大的种类是树遍历
向上遍历 DOM树
parent() 返回被选元素的父元素
  返回被选元素的直接父元素 该方法只会对上一级Dom树进行遍历
parents() 返回被选元素的所有祖先元素
  返回被选元素的所有组选元素 ,它一路向上直到文档的根元素
  可以使用参数进行祖先的过滤
parentsUntil() 返回被选元素的所有祖先元素，直到匹配选择器
  返回介于两个给定元素之间的所有祖先元素

遍历后代 向下遍历 DOM树 以查找 元素的后代
children() 返回被选元素的所有直接子元素
find() 返回被选元素的所有后代元素
使用参数来过滤对 子元素的搜索

同胞拥有相同的父元素
通过jQuery 能够在  DOM树中遍历元素的同胞元素
水平遍历
silblings() 返回被选元素的所有同胞元素
next() 返回被选元素的下一个兄弟元素
nextAll() 返回被选元素的所有后面所有兄弟元素
nextUntil() 返回介于两个给定元素之间的所有后面所有兄弟元素
prev() 返回被选元素的前一个兄弟元素
prevAll() 返回被选元素的
prevUntil() 返回介于两个给定元素之间的所有前面所有兄弟元素

jQuery 遍历 过滤
缩写搜索元素的范围
3个最基础的过滤方法
first() 返回被选元素的第一个同胞元素
last() 返回被选元素的最后一个同胞元素
eq() 返回被选元素的指定索引值
允许基于其在一组元素中的位置来选择一个特别的元素
其他过滤方法 filter() filter() 方法允许对被选元素进行过滤
not() 允许您选取匹配或不匹配某项指定标准的元素

jQuery Ajax 实例 ajax是与服务器交换数据的艺术
ajax 就是在不重载页面的情况下,AJAX 通过后台加载
load() 方法是简单但强大的 AJAX 方法
load() 方法从服务器加载数据 并把返回的数据放入被选元素中

可选的callback 参数 规定当load()方法完成后所要允许的回调函数 回调函数可以设置不同的参数
responseTXT  -包含调用成功时的结果内容
statusText -包含调用的状态
xhr -XMLHttpRequest 对象

在load() 方法完成后显示一个提示框.如果load()方法已成功 ,则显示 "成功!" ,否则显示 "失败!"

HTTP 请求  get vs post
get 从指定的资源请求数据 从服务器获得(取回)数据 , get方法可能返回缓存数据
  $get() 的第一个参数是url的地址 (demo_test.asp)
  第二个参数是回调函数 ,第一个回调参数存在会被请求页面的内容 ,第二个回调参数存有请求的状态
post 向指定的资源提交数据 post方法不会缓存数据,并且常用于连同请求一起发送数据



-->
<body>

<!--<button>向页面发送 http get请求,然后返回的结果</button>-->
<button>向页面发送 http post请求,然后返回的结果</button>

<!--<div id="div1"><h2>使用 jQuery Ajax 改变文本</h2></div>-->
<!--<button>获得外部内容</button>-->

<!--<h3 id="test">请点击下面的按钮,通过jQuery Ajax 改变这段文本</h3>-->
<!--<button id="btn1" type="button">获得外部内容</button>-->

<!--<h1>欢迎来到我的主页</h1>-->
<!--<p>我是唐老鸭。</p>-->
<!--<p class="intro">我住在 Duckburg。</p>-->
<!--<p class="intro">我爱 Duckburg。</p>-->
<!--<p>我最好的朋友是 Mickey。</p>-->

<!--<h1>欢迎来到我的主页</h1>-->
<!--<p>我是唐老鸭 (index 0)。</p>-->
<!--<p>唐老鸭 (index 1)。</p>-->
<!--<p>我住在 Duckburg (index 2)。</p>-->
<!--<p>我最好的朋友是米老鼠 (index 3)。</p>-->

<!--<h1>欢迎来到我的主页</h1>-->
<!--<div>-->
<!--  <p>这是 div 中的一个段落</p>-->
<!--</div>-->
<!--<div>-->
<!--  <p>这是 div 中的另一个段落</p>-->
<!--</div>-->
<!--<p>这也是段落</p>-->


<!--<body class="siblings">-->
<!--<div>-->
<!--  div (父)-->
<!--  <p>p</p>-->
<!--  <span>span</span>-->
<!--  <h2>h2</h2>-->
<!--  <h3>h3</h3>-->
<!--  <h4>h4</h4>-->
<!--  <h5>h5</h5>-->
<!--  <h6>h6</h6>-->
<!--  <p>p</p>-->
<!--</div>-->

<!--<div class="descendants" style="width:500px;">div (current element)-->
<!--  <p>p (子)-->
<!--    <span>span (孙)</span>-->
<!--  </p>-->
<!--  <p>p (child)-->
<!--    <span>span (孙)</span>-->
<!--  </p>-->
<!--</div>-->

<!--<div class="descendants" style="width: 500px;">div(当前元素)-->
<!--  <p class="a">-->
<!--    p(子)-->
<!--    <span>span(孙)</span>-->
<!--  </p>-->
<!--  <p class="b">-->
<!--    p(子)-->
<!--    <span>span(孙)</span>-->
<!--  </p>-->
<!--</div>-->

<!--<body class="ancestors">body (曾曾祖父)-->
<!--<div style="width:500px;">div (曾祖父)-->
<!--  <ul>ul (祖父)-->
<!--    <li>li (直接父)-->
<!--      <span>span</span>-->
<!--    </li>-->
<!--  </ul>-->
<!--</div>-->
<!--<body>-->

<!--<div class="ancestors">-->
<!--  <div style="width:500px;">div (曾祖父)-->
<!--    <ul>ul (祖父)-->
<!--      <li>li (直接父)-->
<!--        <span>span</span>-->
<!--      </li>-->
<!--    </ul>-->
<!--  </div>-->

<!--  <div style="width:500px;">div (祖父)-->
<!--    <p>p (直接父)-->
<!--      <span>span</span>-->
<!--    </p>-->
<!--  </div>-->
<!--</div>-->


<!--<div id="div1" style="height:150px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>-->
<!--<br>-->
<!--<button>显示 div 的尺寸</button>-->
<!--<p>width() - 返回元素的宽度。</p>-->
<!--<p>height() - 返回元素的高度。</p>-->
<!--<p>innerWidth() - 返回元素的宽度（包括内边距）。</p>-->
<!--<p>innerHeight() - 返回元素的高度（包括内边距）。</p>-->
<!--<p>outerWidth() - 返回元素的宽度（包括内边距和边框）。</p>-->
<!--<p>outerHeight() - 返回元素的高度（包括内边距和边框）。</p>-->

<!--<h2>这是标题</h2>-->
<!--<p style="background-color: #ff0000">这是一个段落.</p>-->
<!--<p style="background-color: #00ff00">这是一个段落.</p>-->
<!--<p style="background-color: #0000ff">这是一个段落.</p>-->
<!--<p>这是一个段落</p>-->
<!--<button>设置p元素的背景色(多个)</button>-->
<!--<button>返回p元素的背景颜色</button>-->

<!--<h1>标题 1</h1>-->
<!--<h2>标题 2</h2>-->
<!--<p>这是一个段落</p>-->
<!--<p>这是另一个段落</p>-->
<!--<button>切换 css类</button>-->

<!--<h1 class="blue">标题1</h1>-->
<!--<h2 class="blue">标题2</h2>-->
<!--<p class="blue">这是一个段落</p>-->
<!--<p>这是另一个段落</p>-->
<!--<br>-->
<!--<button>从元素上删除类</button>-->

<!--<h1>标题1</h1>-->
<!--<h1>标题2</h1>-->
<!--<p>这是一个段落</p>-->
<!--<p>这是另一个段落</p>-->
<!--<div>这是非常重要的文本</div>-->
<!--<br>-->
<!--<button>向元素添加类</button>-->

<!--向addClass()方法中规定多个类-->
<!--<div id="div1">这是一些文本</div>-->
<!--<div id="div2">这是一些文本</div>-->
<!--<br>-->
<!--<button>向第一个div元素添加类</button>-->

<!--删除元素的子元素-->
<!--<p>this is a paragraph.</p>-->
<!--<p class="italic"><i>this is another paragraph in the div.</i></p>-->
<!--<p class="italic"><i>this is another paragraph in the div.</i></p>-->
<!--<button>删除 class为italic的元素</button>-->

<!--清空元素-->
<!--<div id="div1" style="height: 100px;width: 300px;border: 1px solid black;background-color: yellow;">-->
<!--  this is a paragraph in a div.-->
<!--  <p>this is another paragraph.</p>-->
<!--  <p>this is another paragraph1.</p>-->
<!--</div>-->
<!--<br>-->
<!--&lt;!&ndash;<button>删除div元素</button>&ndash;&gt;-->
<!--<button>清空div元素</button>-->

<!--新增元素 向前/向后-->
<!--<p>this is a paragraph.</p>-->
<!--<p>this is another paragraph.</p>-->
<!--<ol>-->
<!--  <li>List item 1</li>-->
<!--  <li>List item 2</li>-->
<!--  <li>List item 3</li>-->
<!--</ol>-->
<!--<button id="btn1">追加文本</button>-->
<!--<button id="btn2">追加列表项</button>-->
<!--<button onclick="appendText()">追加文本</button>-->
</body>
</html>
